import Taro, { Component, Config } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtTabs, AtTabsPane, AtButton } from 'taro-ui'
import { Header } from '../common/header';
import { OrderItem } from '../components/orderItem'
import './index.scss';
import '../common/header.scss';

export default class Index extends Component {

  constructor(){
    super();
    this.state = {
      current:0,
      order:[]
    }
  }

  componentWillMount () { 
    let current = parseInt(this.$router.params.index)? parseInt(this.$router.params.index):0;
    this.setState({
      current:current
    });
  }

  componentDidMount () {
    let status;
    if(this.state.current === 1){
      status = 0;
    }else if(this.state.current === 2){
      status = 1;
    }else if(this.state.current === 3){
      status = 2;
    }else if(this.state.current === 4){
      status = 4;
    }else if(this.state.current === 5){
      status = 5;
    }

    this.getData(status);
  }

  handleClick(value){
    console.log(value);
    let status;
    if(value === 1){
      status = 0;
    }else if(value === 2){
      status = 1;
    }else if(value === 3){
      status = 2;
    }else if(value === 4){
      status = 4;
    }else if(value === 5){
      status = 5;
    }
    this.setState({
      current: value
    })
    this.getData(status);
    
  }

  onClickLeftIcon(){
    Taro.navigateBack();
  }

  getData(status){
    let that = this;
    let user = Taro.getStorageSync('user')
    let data = {
      token: user.token,
      status:''
    };
    console.log(status);
    if(status || status === 0){
      data['status'] = status;
    }
    Taro.request({
      credentials:'include',
      url: 'https://guoxiaojian.guoxiaoge.cn/api/order/my',
      data:data,
      success(res){
        if(res.statusCode === 200){
          if(res.data.status === 'SUCCESS'){
            that.setState({
              order:res.data.data
            });
          }else{
            if(res.data.status === 'FAILED'){
              if(res.data.failedCode === 'NO_LOGIN'){
                Taro.navigateTo({
                  url:'/pages/login/login'
                });
              }
            }
          }
        }
      }
    })
  }

  render () {
    const tabList = [
      { title: '全部' }, 
      { title: '待付款' }, 
      { title: '待发货' },
      { title: '待收货' }, 
      { title: '待评价' }, 
      { title: '退款' }, 
    ]
    return (
      <View>
       <Header 
          leftIconType='chevron-left' 
          onClickLeftIcon={this.onClickLeftIcon} 
          title='我的订单'>
        </Header>
        <AtTabs animated scroll swipeable current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={this.state.current} index={0} >
            <OrderItem order={this.state.order}></OrderItem>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1} >
            <OrderItem order={this.state.order}></OrderItem>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={2} >
            <OrderItem order={this.state.order}></OrderItem>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={3} >
            <OrderItem order={this.state.order}></OrderItem>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={4} >
            <OrderItem order={this.state.order}></OrderItem>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={5} >
            <OrderItem order={this.state.order}></OrderItem>
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }
}